<template>
    <div class="topMain">
        <div class="topChara">
          <div class="serif anim-chara">
            <picture>
            <img src="@/assets/serif.png" alt="">
          </picture>
          </div>
          <div class="topChara_fuyu anim-chara">
            <img src="@/assets/fuyu.webp" alt="">
          </div>
          <div class="topChara_Chino anim-chara">
            <img src="@/assets/chino_top.webp" alt="">
          </div>
        </div>
        <div class="top__navi">
          <div class="topNav">
          <button v-for="(items) in pageData" :key="items.id" @click="gotoPage(items.content.toLowerCase())" class="naviBtn">{{items.content}}</button>
        </div>
          <div class="topTitle">
            <img src="@/assets/title.png" alt="">
          </div>
          <div class="topBanner">
            <a href="https://bit.ly/43CqZHi" target="_blank" rel="noopener noreferrer">
              <img src="@/assets/x_banner.jpg" alt="">
            </a>
            <p>ただいまXにて活動中<br><span>質問も受付中!</span></p>
          </div>
        </div>
    </div>
  </template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'TopViews',
  data () {
    return {
    }
  },
  computed: {
    ...mapState('pageInfo', ['pageData'])
  },
  methods: {
    gotoPage (path) {
      this.$router.push(`/details/${path}`)
    }
  }

}
</script>

<style scoped>
  *{
    user-select: none;
  }
  .topMain{
    background: url(@/assets/bg.jpg) no-repeat center bottom;
    background-size: 150rem;
    display: flex;
    min-height: 100vh;
    width: min(150rem,100%);
    background-color: gray;
    padding: 2rem 2rem 6rem;
  }
  @media screen and (min-width: 1024px){
  .topChara {
    width: 60%;
    flex-shrink: 0;
  }
  }
  .topChara{
    display: grid;
    grid-template: 10rem 1fr/repeat(3, 1fr);
  }
  .topChara img{
    width: 100%;
  }
  .serif{
    display: flex;
    justify-content:flex-start ;
    grid-area: 1/1/2/3;
  }
  .serif img{
    max-width: 80%;
  }
  .topChara_Chino{
    grid-area: 2/1/3/3;
  }
  .topChara_fuyu{
    grid-area: 1/2/3/4;
  }
  /* top右侧导航区域 */
  .top__navi{
    width: 615px;
  }
  @media screen and (min-width: 1024px){
  .topNav {
    flex-direction: column;
    align-items: flex-start;
  }
  .topNav > * {
    font-size: 1em;
  }
  .topNav > *:nth-last-child(1) {
    margin-left: 0em;
  }
  .topNav > *:nth-last-child(2) {
    margin-left: 2em;
  }
  .topNav > *:nth-last-child(3) {
    margin-left: 4em;
  }
  .topNav > *:nth-last-child(4) {
    margin-left: 6em;
  }
}
.topNav{
  display: flex;
}
.topNav .naviBtn{
  font-size: 4rem;
}
.topTitle{
  margin-top: 6rem;
}
.topBanner{
  margin-top: 5rem;
  text-align: center;
  color: #fff;
}
.topBanner p {
    font-size: 3rem;
    line-height: 1.2;
}
.topBanner p span {
    font-size: .8em;
}
</style>
